import { Button, Card, Form, Input, Watermark, message } from "antd";
import FormRender, { useForm } from "form-render";
import schema from "./schema";
import styles from "./index.module.less";
import state, { setState } from "../../model/routerStore";
import { useSnapshot } from "valtio";
import { useNavigate } from "react-router-dom";

function Login() {
  const form = useForm();
  const navigate = useNavigate();
  const onFinish = (formData: any) => {
    setState(true);
    message.success("登录成功");
    setTimeout(() => {
      navigate("/");
    }, 1000);
    console.log("formData:", formData);
  };
  return (
    <div className={styles.login}>
      <Watermark content="cvnert">
        <Card
          title={
            <div className={styles.title}>
              <span>博客后台登录</span>
            </div>
          }
          style={{ width: 500 }}
        >
          <div className={styles.form}>
            <FormRender
              style={{ width: 400, marginLeft: 100 }}
              form={form}
              schema={schema}
              onFinish={onFinish}
              maxWidth={200}
              footer={() => (
                <>
                  <Button
                    htmlType="submit"
                    style={{ marginLeft: 30 }}
                    type="primary"
                  >
                    登录
                  </Button>
                </>
              )}
            />
          </div>
        </Card>
      </Watermark>
    </div>
  );
}

export default Login;
